/*css 选择器   类选择器*/
/*选择器的意思，就是拿到div容器，对其设置样式*/
/*.test{*/
/*    color:red;*/
/*}*/
/*类选择器用.；id选择器用#*/
/*#testId{*/
/*    color: green;*/
/*}*/
/*属性选择器*/
/*div[sex='男'] {*/
/*    color: red;*/
/*}*/
/*直接以标签或者元素来得到容器叫做元素选择器*/
/*div{*/
/*    color: red;*/
/*}*/
/*伪选择器*/
/*拿到所有div的第三个元素*/
/*div:nth-child(3){*/
/*    color: red;*/
/*}*/
/*body{*/
/*    color: red;*/
/*}*/
/*自定义元素：自己定义的元素*/
/*divd{*/
/*    color: red;*/
/*}*/
/*  > 子代选择器*/
/*body > div:nth-child(3)  有>符号，则代表只能取body下面的div的第三个  : 只能取当前元素子代的下面第三个*/
/* 没有大于符号，则叫做后代选择器 */
/*body div:nth-child(3)  如果没有>符号，则可以取body下面所有的div的第三个  ：可以取所有后代的元素的第三个*/
/*body > div:nth-child(3){*/
/*    color: red;*/
/*}*/
/*选择器的目的：就是为了得到当前的div元素，然后对元素进行设置样式*/

/*#testId{*/
/*    background-color: blue;*/
/*}*/
/*div[sex='男']{*/
/*    background-color: gray;*/
/*}*/
.test {
    background-color: green;
}

div[sex=''] > div {
    border: 5px solid yellow;
    display: flex;
    flex-wrap: wrap;
    /*flex-direction: row-reverse;*/
    /*flex-direction: column-reverse;*/
    width: 600px;
}
div[sex=''] > div>div{
    width: 200px;
}
div[sex=''] > div>div:nth-child(3){
    width: 400px;
}
div[sex=''] > div > div:nth-child(1) {
    background-color: red;
}

div[sex=''] > div > div:nth-child(2) {
    background-color: #2e4b80;
    /*字体*/
    font-family: 华文中宋;
    /*字体大小*/
    font-size: 30px;
    /*字体颜色*/
    color: blueviolet;
    /*字体粗细*/
    font-weight: bolder;
}

div[sex=''] > div > div:nth-child(3) {
    background-color: rgb(91, 141, 88);
}

body > div:nth-child(3) {
    /*rgba  这个a表示透明度,取值范围在0-1之间*/
    background-color: rgba(91, 141, 88, 0.5);
}

/*当再次对div进行样式设置的时候，优先显示优先级比较高的样式，优先级比较低的样式会被覆盖*/
div[sex=''] {
    height: 450px;
}

divd {
    background-color: blue;
    height: 150px;
}

div {
    /*height: 150px;*/
    /*background-color: aqua;*/
}

/*选择器的优先级 ：  id选择器>  属性选择器  > 类选择器 >  元素选择器                      */

body {
    /*1.0px后面的单位有一个背景颜色 ：  一般如果是0的话，后面的单位可以省略*/
    /*2.波浪线  表示警告 可以通过快捷键进行修正 alt+enter*/
    /*margin 外边距 的四个参数可以用一个来表示 当前的div和外面的div的距离  表示离四周的div的距离为0 */
    margin: 0;
    /*margin-top: 0px;*/
    /*margin-left: 0px;*/
    /*margin-bottom: 0px;*/
    /*margin-right: 0px;*/

}

.sex-bb {

    /*margin 后面的四个参数  表示 当前div和其他div的距离  上   右  下  左*/
    /*外边距：  其他div和当前div的边框之间的距离*/
    margin: 10px 20px 30px 40px;

    /*margin-top: 10px;*/
    /*margin-right: 20px;*/
    /*margin-bottom: 30px;*/
    /*margin-left: 40px;*/

    /*border 边框   后面三个参数：  四边边框的大小 边框的形状  边框的颜色*/
    border: 5px solid red;
    border-right-width: 10px;
    border-bottom-width: 20px;
    border-left-width: 30px;

    /*border-top-width: 5px;*/
    /*border-right-width: 10px;*/
    /*border-bottom-width: 20px;*/
    /*border-left-width: 30px;*/


    /*内边距：  内容和边框之间的距离   上右下左*/
    /*padding: 20px 10px 5px 50px;*/
    /*内边距如果三个参数： 上  左右  下*/
    /*padding: 20px 50px 5px;*/

    /*padding-top: 20px;*/
    /*padding-right: 50px;*/
    /*padding-bottom: 5px;*/
    /*padding-left: 50px;*/

    /*内边距如果两个参数：上下 左右*/
    padding: 20px 50px;
    /*padding-top: 20px;*/
    /*padding-right: 50px;*/
    /*padding-bottom: 20px;*/
    /*padding-left: 50px;*/
}

div[sex=''] {
    display: flex;
    /*justify-content: center;*/
    /*justify-content: space-between;*/
    /*justify-content: space-around;*/
    /*justify-content: flex-end;*/
    /*align-items: center;*/
    /*align-items: flex-start;*/
    /*align-items: flex-end;*/
    /*justify-content: flex-end;*/
    align-items: center;
    justify-content: center;
}

/*单行溢出*/
.single-over {
    /*超过的要隐藏*/
    overflow: hidden;
    /*不换行*/
    white-space: nowrap;
    /*多余的用...表示*/
    text-overflow: ellipsis;
}

/*多行溢出*/
.many-over-two {
    /*前两行固定用法*/
    display: -webkit-box;
    -webkit-box-orient: vertical;
    /*多余的...表示*/
    text-overflow: ellipsis;
    /*最多显示两行*/
    -webkit-line-clamp: 2;
    /*多余的隐藏*/
    overflow: hidden;
}
/*多行溢出*/
.many-over-three {
    /*前两行固定用法*/
    display: -webkit-box;
    -webkit-box-orient: vertical;
    /*多余的...表示*/
    text-overflow: ellipsis;
    /*最多显示两行*/
    -webkit-line-clamp: 3;
    /*多余的隐藏*/
    overflow: hidden;
}